본문으로 건너뛰기

Next.js SEO 최적화

작성일 : 2025.01.19

Next.js에서는 다양한 내장 기능과 최적화 도구들을 통해 효과적인 SEO 최적화를 구현할 수 있습니다.

1. Metadata API를 통한 최적화​

Next.js 13.2 버전부터 도입된 Metadata API는 정적 및 동적 메타데이터를 효과적으로 관리할 수 있게 해줍니다. 기본적인 title, description 태그부터 OpenGraph, Twitter 카드까지 다양한 메타데이터를 설정할 수 있습니다. 특히 동적 라우트에서 generateMetadata 함수를 사용하면 각 페이지별로 최적화된 메타데이터를 생성할 수 있습니다.

또한 메타데이터 템플릿을 사용하면 일관된 형식을 유지하면서도 페이지별로 특화된 정보를 제공할 수 있습니다. 예를 들어, 모든 페이지의 제목에 사이트 이름을 포함하면서도 각 페이지의 고유한 제목을 표시할 수 있습니다.

정적 메타데이터:​

// app/layout.tsx
import { Metadata } from 'next'

export const metadata: Metadata = {
  title: {
    default: '웹사이트 이름',
    template: '%s | 웹사이트 이름'  // 하위 페이지 제목 템플릿
  },
  description: '웹사이트에 대한 자세한 설명',
  keywords: ['Next.js', 'React', 'JavaScript'],
  authors: [{ name: '작성자 이름' }],
  openGraph: {
    title: '소셜 미디어용 제목',
    description: '소셜 미디어용 설명',
    images: [{
      url: '/og-image.jpg',
      width: 1200,
      height: 630,
      alt: '이미지 설명'
    }]
  },
  twitter: {
    card: 'summary_large_image',
    title: '트위터용 제목',
    description: '트위터용 설명',
    images: ['/twitter-image.jpg']
  }
}

동적 메타데이터:​

// app/blog/[id]/page.tsx
import { Metadata } from 'next'

export async function generateMetadata(
  { params }: { params: { id: string } }
): Promise<Metadata> {
  const post = await fetchPost(params.id)
  
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [
        {
          url: post.image,
          width: 1200,
          height: 630,
          alt: post.imageAlt
        }
      ]
    }
  }
}

2. 구조화된 데이터 마크업​

검색 엔진이 콘텐츠를 더 정확하게 이해할 수 있도록 구조화된 데이터(Schema Markup)를 제공합니다. 블로그 포스트, 제품 정보, FAQ 등 다양한 유형의 콘텐츠에 대해 schema.org 형식의 JSON-LD를 구현할 수 있습니다. 이를 통해 검색 결과에서 리치 스니펫이 표시되어 클릭률을 높일 수 있습니다.

// components/BlogPostSchema.tsx
export default function BlogPostSchema({ post }) {
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{
        __html: JSON.stringify({
          '@context': 'https://schema.org',
          '@type': 'BlogPosting',
          headline: post.title,
          datePublished: post.publishDate,
          dateModified: post.updateDate,
          author: {
            '@type': 'Person',
            name: post.author.name
          },
          image: post.image,
          description: post.excerpt
        })
      }}
    />
  )
}

3. 동적 sitemap.xml과 robots.txt​

Next.js의 app 디렉토리에서 sitemap과 robots를 동적으로 생성할 수 있습니다. 데이터베이스에서 모든 URL을 가져와 자동으로 사이트맵을 생성할 수 있으며, 각 URL의 중요도와 업데이트 빈도도 설정할 수 있습니다. robots.txt를 통해 검색 엔진 크롤러의 접근을 제어하고, 사이트맵의 위치를 알려줄 수 있습니다.

// app/sitemap.ts
import { fetchAllPosts, fetchAllProducts } from '@/lib/api'

export default async function sitemap() {
  const baseUrl = 'https://example.com'
  
  // 동적으로 블로그 포스트 URL 가져오기
  const posts = await fetchAllPosts()
  const postUrls = posts.map(post => ({
    url: `${baseUrl}/blog/${post.slug}`,
    lastModified: post.updatedAt,
    changeFrequency: 'weekly',
    priority: 0.8
  }))
  
  // 동적으로 제품 페이지 URL 가져오기
  const products = await fetchAllProducts()
  const productUrls = products.map(product => ({
    url: `${baseUrl}/products/${product.id}`,
    lastModified: product.updatedAt,
    changeFrequency: 'daily',
    priority: 0.9
  }))
  
  // 정적 페이지
  const staticUrls = [
    {
      url: baseUrl,
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 1
    },
    {
      url: `${baseUrl}/about`,
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.5
    }
  ]
  
  return [...staticUrls, ...postUrls, ...productUrls]
}

4. 서버 사이드 렌더링과 성능 최적화​

Next.js의 서버 사이드 렌더링을 활용하면 검색 엔진이 JavaScript를 실행하지 않고도 콘텐츠를 크롤링할 수 있습니다. 또한 이미지 최적화, 폰트 최적화, 코드 분할 등을 통해 페이지 로딩 속도를 개선할 수 있으며, 이는 SEO 순위에 긍정적인 영향을 미칩니다.

특히 Next/Image 컴포넌트를 사용하면 자동으로 이미지를 최적화하고, 지연 로딩을 구현하며, 올바른 크기의 이미지를 제공할 수 있습니다. 이는 Core Web Vitals 지표 개선에 큰 도움이 됩니다.

5. 웹 접근성과 시맨틱 마크업​

시맨틱 HTML을 사용하여 콘텐츠의 구조를 명확히 하고, ARIA 레이블과 역할을 적절히 설정하여 웹 접근성을 개선합니다. 이는 검색 엔진이 콘텐츠의 구조와 의미를 이해하는 데 도움을 주며, 더 나은 SEO 결과로 이어집니다.

이러한 SEO 최적화 방법들을 종합적으로 적용하면, 검색 엔진에서의 가시성을 높이고 사용자 경험을 개선할 수 있습니다. Next.js의 내장 기능들을 활용하면 개발자가 직접 구현해야 하는 부분을 최소화하면서도 효과적인 SEO 최적화를 달성할 수 있습니다.

// app/blog/[id]/page.tsx
export default function BlogPost({ post }) {
  return (
    <article itemScope itemType="http://schema.org/BlogPosting">
      <header>
        <h1 itemProp="headline">{post.title}</h1>
        <div className="metadata">
          <time itemProp="datePublished" dateTime={post.publishDate}>
            {formatDate(post.publishDate)}
          </time>
          <address itemProp="author">{post.author}</address>
        </div>
      </header>
      
      <main>
        <div 
          itemProp="articleBody"
          className="prose prose-lg"
          dangerouslySetInnerHTML={{ __html: post.content }}
        />
      </main>
      
      <nav aria-label="게시물 내비게이션">
        <div className="flex justify-between">
          {post.previousPost && (
            <Link href={`/blog/${post.previousPost.slug}`}>
              ← {post.previousPost.title}
            </Link>
          )}
          {post.nextPost && (
            <Link href={`/blog/${post.nextPost.slug}`}>
              {post.nextPost.title} →
            </Link>
          )}
        </div>
      </nav>
    </article>
  )
}